﻿@page "/JsInterop/Html_CssView"
@using Maanfee.Dashboard.Examples.Views.JsInterop.Components
@using Maanfee.Dashboard.Examples.Views.JsInterop.Pages.JsInterop._002Html_Css.Codes;

<MaanfeeDashboardPage>
	<MaanfeeDashboardPageHeader PageTitle="HTML/CSS Methods" Title="HTML/CSS Methods" SubTitle="The following table lists all the methods used to manipulate the HTML and CSS." />

	<DashboardPageContent>
		<DashboardPageSection Title="Examples">
			<MudGrid>
				<MudItem md="12">
					<MudSimpleTable Dense="@true" Hover="@true" Bordered="@true" Striped="@true" Style="overflow-x: auto;">
						<thead>
							<tr>
								<th>Method</th>
								<th>Example</th>
								<th>Selects</th>
								<th></th>
							</tr>
						</thead>
						<tbody>
							@*AddClass*@
							<tr>
								<td style="color: #8323d8;">AddClass()</td>
								<td>
									<MudText Typo="Typo.caption" Color="Color.Success">
										await Dom.QuerySelectorAll(".class").AddClass(property, value)
									</MudText>
								</td>
								<td>
									<MudText Typo="Typo.caption" Color="Color.Info">
										Adds one or more class names to selected elements
									</MudText>
								</td>
								<td>
									<MudButton OnClick="@(()=>OpenExampleDialog("AddClassMethod", typeof(AddClassMethod)))" StartIcon="@Icons.Material.Filled.PlayArrow" Variant="Variant.Filled" Size="Size.Small" Color="Color.Success">Try</MudButton>
								</td>
							</tr>
							@*After*@
							<tr>
								<td style="color: #8323d8;">After()</td>
								<td>
									<MudText Typo="Typo.caption" Color="Color.Success">
										await Dom.QuerySelectorAll(".class").After(Content)

									</MudText>
								</td>
								<td>
									<MudText Typo="Typo.caption" Color="Color.Info">
										Inserts content after selected elements
									</MudText>
								</td>
								<td>
									<MudButton OnClick="@(()=>OpenExampleDialog("AfterMethod", typeof(AfterMethod)))" StartIcon="@Icons.Material.Filled.PlayArrow" Variant="Variant.Filled" Size="Size.Small" Color="Color.Success">Try</MudButton>
								</td>
							</tr>
							@*Css*@
							<tr>
								<td style="color: #8323d8;">Css()</td>
								<td>
									<MudText Typo="Typo.caption" Color="Color.Success">
										await Dom.QuerySelectorAll(".class").css(property, value)
									</MudText>
								</td>
								<td>
									<MudText Typo="Typo.caption" Color="Color.Info">
										Sets or returns one or more style properties for selected elements
									</MudText>
								</td>
								<td>
									<MudButton OnClick="@(()=>OpenExampleDialog("CssMethod", typeof(CssMethod)))" StartIcon="@Icons.Material.Filled.PlayArrow" Variant="Variant.Filled" Size="Size.Small" Color="Color.Success">Try</MudButton>
								</td>
							</tr>
							@*HasClass*@
							<tr>
								<td style="color: #8323d8;">HasClass()</td>
								<td>
									<MudText Typo="Typo.caption" Color="Color.Success">
										await Dom.QuerySelectorAll(".class").HasClass(Classname)
									</MudText>									
								</td>
								<td>
									<MudText Typo="Typo.caption" Color="Color.Info">
										Checks if any of the selected elements have a specified class name
									</MudText>
								</td>
								<td>
									<MudButton OnClick="@(()=>OpenExampleDialog("HasClassMethod", typeof(HasClassMethod)))" StartIcon="@Icons.Material.Filled.PlayArrow" Variant="Variant.Filled" Size="Size.Small" Color="Color.Success">Try</MudButton>
								</td>
							</tr>
							@*RemoveClass*@
							<tr>
								<td style="color: #8323d8;">RemoveClass()</td>
								<td>
									<MudText Typo="Typo.caption" Color="Color.Success">
										await Dom.QuerySelectorAll(".class").RemoveClass(Classname)
									</MudText>
								</td>
								<td>
									<MudText Typo="Typo.caption" Color="Color.Info">
										Removes one or more classes from selected elements.
									</MudText>
								</td>
								<td>
									<MudButton OnClick="@(()=>OpenExampleDialog("RemoveClassMethod", typeof(RemoveClassMethod)))" StartIcon="@Icons.Material.Filled.PlayArrow" Variant="Variant.Filled" Size="Size.Small" Color="Color.Success">Try</MudButton>
								</td>
							</tr>
						</tbody>
					</MudSimpleTable>
				</MudItem>
			</MudGrid>
		</DashboardPageSection>
	</DashboardPageContent>
</MaanfeeDashboardPage>

@code {

	private void OpenExampleDialog(string CodeFileName, Type Type)
	{
		DialogParameters parameters = new DialogParameters();
		parameters.Add("CodeFileName", CodeFileName);
		parameters.Add("Type", Type);

		var dialog = Dialog.Show<DialogTry>("Try", parameters,
		new DialogOptions()
			{
				MaxWidth = MaxWidth.Large,
				FullWidth = true,
				Position = DialogPosition.Center,
			});

	}
}

